"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _utils = require("../../ui/src/utils");
var _dom = require("../../ui/src/dom");
var _ui = require("../../ui");
var _table = _interopRequireDefault(require("../../table"));
var _toolbar = _interopRequireDefault(require("../../toolbar"));
var _props = _interopRequireDefault(require("../../table/src/props"));
var _emits = _interopRequireDefault(require("../../table/src/emits"));
var _vn = require("../../ui/src/vn");
var _log = require("../../ui/src/log");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  getConfig,
  getI18n,
  commands,
  hooks,
  useFns,
  createEvent,
  globalEvents,
  GLOBAL_EVENT_KEYS,
  renderEmptyElement
} = _ui.VxeUI;
const tableComponentPropKeys = Object.keys(_props.default);
const tableComponentMethodKeys = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'getPendingRecords', 'clearPendingRow', 'sort', 'setSort', 'clearSort', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'openTooltip', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect'];
const gridComponentEmits = [..._emits.default, 'page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'];
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'VxeGrid',
  props: Object.assign(Object.assign({}, _props.default), {
    layouts: Array,
    columns: Array,
    pagerConfig: Object,
    proxyConfig: Object,
    toolbarConfig: Object,
    formConfig: Object,
    zoomConfig: Object,
    size: {
      type: String,
      default: () => getConfig().grid.size || getConfig().size
    }
  }),
  emits: gridComponentEmits,
  setup(props, context) {
    var _a;
    const {
      slots,
      emit
    } = context;
    const xID = _xeUtils.default.uniqueId();
    // 使用已安装的组件，如果未安装则不渲染
    const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
    const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
    const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']];
    const {
      computeSize
    } = useFns.useSize(props);
    const reactData = (0, _vue.reactive)({
      tableLoading: false,
      proxyInited: false,
      isZMax: false,
      tableData: [],
      filterData: [],
      formData: {},
      sortData: [],
      tZindex: 0,
      tablePage: {
        total: 0,
        pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
        currentPage: 1
      }
    });
    const refElem = (0, _vue.ref)();
    const refTable = (0, _vue.ref)();
    const refForm = (0, _vue.ref)();
    const refToolbar = (0, _vue.ref)();
    const refPager = (0, _vue.ref)();
    const refFormWrapper = (0, _vue.ref)();
    const refToolbarWrapper = (0, _vue.ref)();
    const refTopWrapper = (0, _vue.ref)();
    const refBottomWrapper = (0, _vue.ref)();
    const refPagerWrapper = (0, _vue.ref)();
    const extendTableMethods = methodKeys => {
      const funcs = {};
      methodKeys.forEach(name => {
        funcs[name] = (...args) => {
          const $xeTable = refTable.value;
          if ($xeTable && $xeTable[name]) {
            return $xeTable[name](...args);
          }
        };
      });
      return funcs;
    };
    const gridExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
    tableComponentMethodKeys.forEach(name => {
      gridExtendTableMethods[name] = (...args) => {
        const $xeTable = refTable.value;
        if ($xeTable && $xeTable[name]) {
          return $xeTable && $xeTable[name](...args);
        }
      };
    });
    const computeProxyOpts = (0, _vue.computed)(() => {
      return _xeUtils.default.merge({}, _xeUtils.default.clone(getConfig().grid.proxyConfig, true), props.proxyConfig);
    });
    const computeIsRespMsg = (0, _vue.computed)(() => {
      const proxyOpts = computeProxyOpts.value;
      return _xeUtils.default.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg;
    });
    const computeIsActiveMsg = (0, _vue.computed)(() => {
      const proxyOpts = computeProxyOpts.value;
      return proxyOpts.showActiveMsg;
    });
    const computePagerOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig);
    });
    const computeFormOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().grid.formConfig, props.formConfig);
    });
    const computeToolbarOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig);
    });
    const computeZoomOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().grid.zoomConfig, props.zoomConfig);
    });
    const computeStyles = (0, _vue.computed)(() => {
      const {
        height,
        maxHeight
      } = props;
      const {
        isZMax,
        tZindex
      } = reactData;
      const stys = {};
      if (isZMax) {
        stys.zIndex = tZindex;
      } else {
        if (height) {
          stys.height = height === 'auto' || height === '100%' ? '100%' : (0, _dom.toCssUnit)(height);
        }
        if (maxHeight) {
          stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : (0, _dom.toCssUnit)(maxHeight);
        }
      }
      return stys;
    });
    const computeTableExtendProps = (0, _vue.computed)(() => {
      const rest = {};
      const gridProps = props;
      tableComponentPropKeys.forEach(key => {
        rest[key] = gridProps[key];
      });
      return rest;
    });
    const computeTableProps = (0, _vue.computed)(() => {
      const {
        seqConfig,
        pagerConfig,
        loading,
        editConfig,
        proxyConfig
      } = props;
      const {
        isZMax,
        tableLoading,
        tablePage,
        tableData
      } = reactData;
      const tableExtendProps = computeTableExtendProps.value;
      const proxyOpts = computeProxyOpts.value;
      const pagerOpts = computePagerOpts.value;
      const tableProps = Object.assign({}, tableExtendProps);
      if (isZMax) {
        if (tableExtendProps.maxHeight) {
          tableProps.maxHeight = '100%';
        } else {
          tableProps.height = '100%';
        }
      }
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        tableProps.loading = loading || tableLoading;
        tableProps.data = tableData;
        if (pagerConfig && proxyOpts.seq && (0, _utils.isEnableConf)(pagerOpts)) {
          tableProps.seqConfig = Object.assign({}, seqConfig, {
            startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
          });
        }
      }
      if (editConfig) {
        tableProps.editConfig = Object.assign({}, editConfig);
      }
      return tableProps;
    });
    const computeCurrLayoutConf = (0, _vue.computed)(() => {
      const {
        layouts
      } = props;
      let confs = [];
      if (layouts && layouts.length) {
        confs = layouts;
      } else {
        confs = getConfig().grid.layouts || defaultLayouts;
      }
      let headKeys = [];
      let bodyKeys = [];
      let footKeys = [];
      if (confs.length) {
        if (_xeUtils.default.isArray(confs[0])) {
          headKeys = confs[0];
          bodyKeys = confs[1] || [];
          footKeys = confs[2] || [];
        } else {
          bodyKeys = confs;
        }
      }
      return {
        headKeys,
        bodyKeys,
        footKeys
      };
    });
    const computePageConfFlag = (0, _vue.computed)(() => {
      const pagerOpts = computePagerOpts.value;
      return `${pagerOpts.currentPage}${pagerOpts.pageSize}`;
    });
    const refMaps = {
      refElem,
      refTable,
      refForm,
      refToolbar,
      refPager
    };
    const computeMaps = {
      computeProxyOpts,
      computePagerOpts,
      computeFormOpts,
      computeToolbarOpts,
      computeZoomOpts
    };
    const $xeGrid = {
      xID,
      props: props,
      context,
      reactData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const initToolbar = () => {
      const toolbarOpts = computeToolbarOpts.value;
      if (props.toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts)) {
        (0, _vue.nextTick)(() => {
          const $xeTable = refTable.value;
          const $xeToolbar = refToolbar.value;
          if ($xeTable && $xeToolbar) {
            $xeTable.connect($xeToolbar);
          }
        });
      }
    };
    const getFormData = () => {
      const {
        proxyConfig
      } = props;
      const {
        formData
      } = reactData;
      const proxyOpts = computeProxyOpts.value;
      const formOpts = computeFormOpts.value;
      return proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
    };
    const initPages = () => {
      const {
        tablePage
      } = reactData;
      const {
        pagerConfig
      } = props;
      const pagerOpts = computePagerOpts.value;
      const {
        currentPage,
        pageSize
      } = pagerOpts;
      if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
        if (currentPage) {
          tablePage.currentPage = currentPage;
        }
        if (pageSize) {
          tablePage.pageSize = pageSize;
        }
      }
    };
    const triggerPendingEvent = code => {
      const isActiveMsg = computeIsActiveMsg.value;
      const $xeTable = refTable.value;
      const selectRecords = $xeTable.getCheckboxRecords();
      if (selectRecords.length) {
        $xeTable.togglePendingRow(selectRecords);
        gridExtendTableMethods.clearCheckboxRow();
      } else {
        if (isActiveMsg) {
          if (_ui.VxeUI.modal) {
            _ui.VxeUI.modal.message({
              id: code,
              content: getI18n('vxe.grid.selectOneRecord'),
              status: 'warning'
            });
          }
        }
      }
    };
    const getRespMsg = (rest, defaultMsg) => {
      const proxyOpts = computeProxyOpts.value;
      const resConfigs = proxyOpts.response || proxyOpts.props || {};
      const messageProp = resConfigs.message;
      let msg;
      if (rest && messageProp) {
        msg = _xeUtils.default.isFunction(messageProp) ? messageProp({
          data: rest,
          $grid: $xeGrid
        }) : _xeUtils.default.get(rest, messageProp);
      }
      return msg || getI18n(defaultMsg);
    };
    const handleDeleteRow = (code, alertKey, callback) => {
      const isActiveMsg = computeIsActiveMsg.value;
      const selectRecords = gridExtendTableMethods.getCheckboxRecords();
      if (isActiveMsg) {
        if (selectRecords.length) {
          if (_ui.VxeUI.modal) {
            return _ui.VxeUI.modal.confirm({
              id: `cfm_${code}`,
              content: getI18n(alertKey),
              escClosable: true
            }).then(type => {
              if (type === 'confirm') {
                return callback();
              }
            });
          }
        } else {
          if (_ui.VxeUI.modal) {
            _ui.VxeUI.modal.message({
              id: `msg_${code}`,
              content: getI18n('vxe.grid.selectOneRecord'),
              status: 'warning'
            });
          }
        }
      } else {
        if (selectRecords.length) {
          callback();
        }
      }
      return Promise.resolve();
    };
    const pageChangeEvent = params => {
      const {
        proxyConfig
      } = props;
      const {
        tablePage
      } = reactData;
      const {
        $event,
        currentPage,
        pageSize
      } = params;
      const proxyOpts = computeProxyOpts.value;
      tablePage.currentPage = currentPage;
      tablePage.pageSize = pageSize;
      gridMethods.dispatchEvent('page-change', params, $event);
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        gridMethods.commitProxy('query').then(rest => {
          gridMethods.dispatchEvent('proxy-query', rest, $event);
        });
      }
    };
    const sortChangeEvent = params => {
      const $xeTable = refTable.value;
      const {
        proxyConfig
      } = props;
      const {
        computeSortOpts
      } = $xeTable.getComputeMaps();
      const proxyOpts = computeProxyOpts.value;
      const sortOpts = computeSortOpts.value;
      // 如果是服务端排序
      if (sortOpts.remote) {
        reactData.sortData = params.sortList;
        if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
          reactData.tablePage.currentPage = 1;
          gridMethods.commitProxy('query').then(rest => {
            gridMethods.dispatchEvent('proxy-query', rest, params.$event);
          });
        }
      }
      gridMethods.dispatchEvent('sort-change', params, params.$event);
    };
    const filterChangeEvent = params => {
      const $xeTable = refTable.value;
      const {
        proxyConfig
      } = props;
      const {
        computeFilterOpts
      } = $xeTable.getComputeMaps();
      const proxyOpts = computeProxyOpts.value;
      const filterOpts = computeFilterOpts.value;
      // 如果是服务端过滤
      if (filterOpts.remote) {
        reactData.filterData = params.filterList;
        if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
          reactData.tablePage.currentPage = 1;
          gridMethods.commitProxy('query').then(rest => {
            gridMethods.dispatchEvent('proxy-query', rest, params.$event);
          });
        }
      }
      gridMethods.dispatchEvent('filter-change', params, params.$event);
    };
    const submitFormEvent = params => {
      const {
        proxyConfig
      } = props;
      const proxyOpts = computeProxyOpts.value;
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        gridMethods.commitProxy('reload').then(rest => {
          gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
            isReload: true
          }), params.$event);
        });
      }
      gridMethods.dispatchEvent('form-submit', params, params.$event);
    };
    const resetFormEvent = params => {
      const {
        proxyConfig
      } = props;
      const {
        $event
      } = params;
      const proxyOpts = computeProxyOpts.value;
      const $xeTable = refTable.value;
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        $xeTable.clearScroll();
        gridMethods.commitProxy('reload').then(rest => {
          gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
            isReload: true
          }), $event);
        });
      }
      gridMethods.dispatchEvent('form-reset', params, $event);
    };
    const submitInvalidEvent = params => {
      gridMethods.dispatchEvent('form-submit-invalid', params, params.$event);
    };
    const collapseEvent = params => {
      const {
        $event
      } = params;
      (0, _vue.nextTick)(() => gridExtendTableMethods.recalculate(true));
      gridMethods.dispatchEvent('form-toggle-collapse', params, $event);
      gridMethods.dispatchEvent('form-collapse', params, $event);
    };
    const handleZoom = isMax => {
      const {
        isZMax
      } = reactData;
      if (isMax ? !isZMax : isZMax) {
        reactData.isZMax = !isZMax;
        if (reactData.tZindex < (0, _utils.getLastZIndex)()) {
          reactData.tZindex = (0, _utils.nextZIndex)();
        }
      }
      return (0, _vue.nextTick)().then(() => gridExtendTableMethods.recalculate(true)).then(() => {
        setTimeout(() => gridExtendTableMethods.recalculate(true), 15);
        return reactData.isZMax;
      });
    };
    const getFuncSlot = (optSlots, slotKey) => {
      const funcSlot = optSlots[slotKey];
      if (funcSlot) {
        if (_xeUtils.default.isString(funcSlot)) {
          if (slots[funcSlot]) {
            return slots[funcSlot];
          } else {
            (0, _log.errLog)('vxe.error.notSlot', [funcSlot]);
          }
        } else {
          return funcSlot;
        }
      }
      return null;
    };
    /**
     * 渲染表单
     */
    const renderForm = () => {
      const {
        formConfig,
        proxyConfig
      } = props;
      const {
        formData
      } = reactData;
      const proxyOpts = computeProxyOpts.value;
      const formOpts = computeFormOpts.value;
      if (formConfig && (0, _utils.isEnableConf)(formOpts) || slots.form) {
        let slotVNs = [];
        if (slots.form) {
          slotVNs = slots.form({
            $grid: $xeGrid
          });
        } else {
          if (formOpts.items) {
            const formSlots = {};
            if (!formOpts.inited) {
              formOpts.inited = true;
              const beforeItem = proxyOpts.beforeItem;
              if (proxyOpts && beforeItem) {
                formOpts.items.forEach(item => {
                  beforeItem({
                    $grid: $xeGrid,
                    item
                  });
                });
              }
            }
            // 处理插槽
            formOpts.items.forEach(item => {
              _xeUtils.default.each(item.slots, func => {
                if (!_xeUtils.default.isFunction(func)) {
                  if (slots[func]) {
                    formSlots[func] = slots[func];
                  }
                }
              });
            });
            if (VxeUIFormComponent) {
              slotVNs.push((0, _vue.h)(VxeUIFormComponent, Object.assign(Object.assign({
                ref: refForm
              }, Object.assign({}, formOpts, {
                data: proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data
              })), {
                onSubmit: submitFormEvent,
                onReset: resetFormEvent,
                onSubmitInvalid: submitInvalidEvent,
                onCollapse: collapseEvent
              }), formSlots));
            }
          }
        }
        return (0, _vue.h)('div', {
          ref: refFormWrapper,
          key: 'form',
          class: 'vxe-grid--form-wrapper'
        }, slotVNs);
      }
      return (0, _vue.createCommentVNode)();
    };
    /**
     * 渲染工具栏
     */
    const renderToolbar = () => {
      const {
        toolbarConfig
      } = props;
      const toolbarOpts = computeToolbarOpts.value;
      if (toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts) || slots.toolbar) {
        let slotVNs = [];
        if (slots.toolbar) {
          slotVNs = slots.toolbar({
            $grid: $xeGrid
          });
        } else {
          const toolbarOptSlots = toolbarOpts.slots;
          let buttonsSlot;
          let toolsSlot;
          const toolbarSlots = {};
          if (toolbarOptSlots) {
            buttonsSlot = getFuncSlot(toolbarOptSlots, 'buttons');
            toolsSlot = getFuncSlot(toolbarOptSlots, 'tools');
            if (buttonsSlot) {
              toolbarSlots.buttons = buttonsSlot;
            }
            if (toolsSlot) {
              toolbarSlots.tools = toolsSlot;
            }
          }
          slotVNs.push((0, _vue.h)(_toolbar.default, Object.assign({
            ref: refToolbar
          }, toolbarOpts), toolbarSlots));
        }
        return (0, _vue.h)('div', {
          ref: refToolbarWrapper,
          key: 'toolbar',
          class: 'vxe-grid--toolbar-wrapper'
        }, slotVNs);
      }
      return (0, _vue.createCommentVNode)();
    };
    /**
     * 渲染表格顶部区域
     */
    const renderTop = () => {
      if (slots.top) {
        return (0, _vue.h)('div', {
          ref: refTopWrapper,
          key: 'top',
          class: 'vxe-grid--top-wrapper'
        }, slots.top({
          $grid: $xeGrid
        }));
      }
      return (0, _vue.createCommentVNode)();
    };
    const renderTableLeft = () => {
      const leftSlot = slots.left;
      if (leftSlot) {
        return (0, _vue.h)('div', {
          class: 'vxe-grid--left-wrapper'
        }, leftSlot({
          $grid: $xeGrid
        }));
      }
      return (0, _vue.createCommentVNode)();
    };
    const renderTableRight = () => {
      const rightSlot = slots.right;
      if (rightSlot) {
        return (0, _vue.h)('div', {
          class: 'vxe-grid--right-wrapper'
        }, rightSlot({
          $grid: $xeGrid
        }));
      }
      return (0, _vue.createCommentVNode)();
    };
    /**
     * 渲染表格
     */
    const renderTable = () => {
      const {
        proxyConfig
      } = props;
      const tableProps = computeTableProps.value;
      const proxyOpts = computeProxyOpts.value;
      const tableOns = Object.assign({}, tableCompEvents);
      const emptySlot = slots.empty;
      const loadingSlot = slots.loading;
      const rowDragIconSlot = slots.rowDragIcon || slots['row-drag-icon'];
      const columnDragIconSlot = slots.columnDragIcon || slots['column-drag-icon'];
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        if (proxyOpts.sort) {
          tableOns.onSortChange = sortChangeEvent;
        }
        if (proxyOpts.filter) {
          tableOns.onFilterChange = filterChangeEvent;
        }
      }
      const slotObj = {};
      if (emptySlot) {
        slotObj.empty = emptySlot;
      }
      if (loadingSlot) {
        slotObj.loading = loadingSlot;
      }
      if (rowDragIconSlot) {
        slotObj.rowDragIcon = rowDragIconSlot;
      }
      if (columnDragIconSlot) {
        slotObj.columnDragIcon = columnDragIconSlot;
      }
      return (0, _vue.h)('div', {
        class: 'vxe-grid--table-wrapper'
      }, [(0, _vue.h)(_table.default, Object.assign(Object.assign({
        ref: refTable
      }, tableProps), tableOns), slotObj)]);
    };
    /**
     * 渲染表格底部区域
     */
    const renderBottom = () => {
      if (slots.bottom) {
        return (0, _vue.h)('div', {
          ref: refBottomWrapper,
          key: 'bottom',
          class: 'vxe-grid--bottom-wrapper'
        }, slots.bottom({
          $grid: $xeGrid
        }));
      }
      return (0, _vue.createCommentVNode)();
    };
    /**
     * 渲染分页
     */
    const renderPager = () => {
      const {
        proxyConfig,
        pagerConfig
      } = props;
      const proxyOpts = computeProxyOpts.value;
      const pagerOpts = computePagerOpts.value;
      if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts) || slots.pager) {
        let slotVNs = [];
        if (slots.pager) {
          slotVNs = slots.pager({
            $grid: $xeGrid
          });
        } else {
          const pagerOptSlots = pagerOpts.slots;
          const pagerSlots = {};
          let leftSlot;
          let rightSlot;
          if (pagerOptSlots) {
            leftSlot = getFuncSlot(pagerOptSlots, 'left');
            rightSlot = getFuncSlot(pagerOptSlots, 'right');
            if (leftSlot) {
              pagerSlots.left = leftSlot;
            }
            if (rightSlot) {
              pagerSlots.right = rightSlot;
            }
          }
          if (VxeUIPagerComponent) {
            slotVNs.push((0, _vue.h)(VxeUIPagerComponent, Object.assign(Object.assign(Object.assign({
              ref: refPager
            }, pagerOpts), proxyConfig && (0, _utils.isEnableConf)(proxyOpts) ? reactData.tablePage : {}), {
              onPageChange: pageChangeEvent
            }), pagerSlots));
          }
        }
        return (0, _vue.h)('div', {
          ref: refPagerWrapper,
          key: 'pager',
          class: 'vxe-grid--pager-wrapper'
        }, slotVNs);
      }
      return (0, _vue.createCommentVNode)();
    };
    const renderChildLayout = layoutKeys => {
      const childVNs = [];
      layoutKeys.forEach(key => {
        switch (key) {
          case 'Form':
            childVNs.push(renderForm());
            break;
          case 'Toolbar':
            childVNs.push(renderToolbar());
            break;
          case 'Top':
            childVNs.push(renderTop());
            break;
          case 'Table':
            childVNs.push((0, _vue.h)('div', {
              key: 'table',
              class: 'vxe-grid--table-container'
            }, [renderTableLeft(), renderTable(), renderTableRight()]));
            break;
          case 'Bottom':
            childVNs.push(renderBottom());
            break;
          case 'Pager':
            childVNs.push(renderPager());
            break;
          default:
            (0, _log.errLog)('vxe.error.notProp', [`layouts -> ${key}`]);
            break;
        }
      });
      return childVNs;
    };
    const renderLayout = () => {
      const currLayoutConf = computeCurrLayoutConf.value;
      const {
        headKeys,
        bodyKeys,
        footKeys
      } = currLayoutConf;
      const asideLeftSlot = slots.asideLeft || slots['aside-left'];
      const asideRightSlot = slots.asideRight || slots['aside-right'];
      return [(0, _vue.h)('div', {
        class: 'vxe-grid--layout-header-wrapper'
      }, renderChildLayout(headKeys)), (0, _vue.h)('div', {
        class: 'vxe-grid--layout-body-wrapper'
      }, [asideLeftSlot ? (0, _vue.h)('div', {
        class: 'vxe-grid--layout-aside-left-wrapper'
      }, asideLeftSlot({})) : renderEmptyElement($xeGrid), (0, _vue.h)('div', {
        class: 'vxe-grid--layout-body-content-wrapper'
      }, renderChildLayout(bodyKeys)), asideRightSlot ? (0, _vue.h)('div', {
        class: 'vxe-grid--layout-aside-right-wrapper'
      }, asideRightSlot({})) : renderEmptyElement($xeGrid)]), (0, _vue.h)('div', {
        class: 'vxe-grid--layout-footer-wrapper'
      }, renderChildLayout(footKeys))];
    };
    const tableCompEvents = {};
    _emits.default.forEach(name => {
      const type = _xeUtils.default.camelCase(`on-${name}`);
      tableCompEvents[type] = (...args) => emit(name, ...args);
    });
    const initProxy = () => {
      const {
        proxyConfig,
        formConfig
      } = props;
      const {
        proxyInited
      } = reactData;
      const proxyOpts = computeProxyOpts.value;
      const formOpts = computeFormOpts.value;
      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
        if (formConfig && (0, _utils.isEnableConf)(formOpts) && proxyOpts.form && formOpts.items) {
          const fData = {};
          formOpts.items.forEach(item => {
            const {
              field,
              itemRender
            } = item;
            if (field) {
              let itemValue = null;
              if (itemRender) {
                const {
                  defaultValue
                } = itemRender;
                if (_xeUtils.default.isFunction(defaultValue)) {
                  itemValue = defaultValue({
                    item
                  });
                } else if (!_xeUtils.default.isUndefined(defaultValue)) {
                  itemValue = defaultValue;
                }
              }
              fData[field] = itemValue;
            }
          });
          reactData.formData = fData;
        }
        if (!proxyInited) {
          reactData.proxyInited = true;
          if (proxyOpts.autoLoad !== false) {
            (0, _vue.nextTick)().then(() => gridMethods.commitProxy('_init')).then(rest => {
              gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
                isInited: true
              }), new Event('init'));
            });
          }
        }
      }
    };
    const handleGlobalKeydownEvent = evnt => {
      const zoomOpts = computeZoomOpts.value;
      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
      if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
        gridPrivateMethods.triggerZoomEvent(evnt);
      }
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, createEvent(evnt, {
        $grid: $xeGrid
      }, params));
    };
    const gridMethods = {
      dispatchEvent,
      /**
       * 提交指令，支持 code 或 button
       * @param {String/Object} code 字符串或对象
       */
      commitProxy(proxyTarget, ...args) {
        const {
          toolbarConfig,
          pagerConfig,
          editRules,
          validConfig
        } = props;
        const {
          tablePage
        } = reactData;
        const isActiveMsg = computeIsActiveMsg.value;
        const isRespMsg = computeIsRespMsg.value;
        const proxyOpts = computeProxyOpts.value;
        const pagerOpts = computePagerOpts.value;
        const toolbarOpts = computeToolbarOpts.value;
        const {
          beforeQuery,
          afterQuery,
          beforeDelete,
          afterDelete,
          beforeSave,
          afterSave,
          ajax = {}
        } = proxyOpts;
        const resConfigs = proxyOpts.response || proxyOpts.props || {};
        const $xeTable = refTable.value;
        const formData = getFormData();
        let button = null;
        let code = null;
        if (_xeUtils.default.isString(proxyTarget)) {
          const {
            buttons
          } = toolbarOpts;
          const matchObj = toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts) && buttons ? _xeUtils.default.findTree(buttons, item => item.code === proxyTarget, {
            children: 'dropdowns'
          }) : null;
          button = matchObj ? matchObj.item : null;
          code = proxyTarget;
        } else {
          button = proxyTarget;
          code = button.code;
        }
        const btnParams = button ? button.params : null;
        switch (code) {
          case 'insert':
            return $xeTable.insert({});
          case 'insert_edit':
            return $xeTable.insert({}).then(({
              row
            }) => $xeTable.setEditRow(row));
          // 已废弃
          case 'insert_actived':
            return $xeTable.insert({}).then(({
              row
            }) => $xeTable.setEditRow(row));
          // 已废弃
          case 'mark_cancel':
            triggerPendingEvent(code);
            break;
          case 'remove':
            return handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow());
          case 'import':
            $xeTable.importData(btnParams);
            break;
          case 'open_import':
            $xeTable.openImport(btnParams);
            break;
          case 'export':
            $xeTable.exportData(btnParams);
            break;
          case 'open_export':
            $xeTable.openExport(btnParams);
            break;
          case 'reset_custom':
            return $xeTable.resetCustom(true);
          case '_init':
          case 'reload':
          case 'query':
            {
              const ajaxMethods = ajax.query;
              const querySuccessMethods = ajax.querySuccess;
              const queryErrorMethods = ajax.queryError;
              if (ajaxMethods) {
                const isInited = code === '_init';
                const isReload = code === 'reload';
                let sortList = [];
                let filterList = [];
                let pageParams = {};
                if (pagerConfig) {
                  if (isInited || isReload) {
                    tablePage.currentPage = 1;
                  }
                  if ((0, _utils.isEnableConf)(pagerOpts)) {
                    pageParams = Object.assign({}, tablePage);
                  }
                }
                if (isInited) {
                  let defaultSort = null;
                  if ($xeTable) {
                    const {
                      computeSortOpts
                    } = $xeTable.getComputeMaps();
                    const sortOpts = computeSortOpts.value;
                    defaultSort = sortOpts.defaultSort;
                  }
                  // 如果使用默认排序
                  if (defaultSort) {
                    if (!_xeUtils.default.isArray(defaultSort)) {
                      defaultSort = [defaultSort];
                    }
                    sortList = defaultSort.map(item => {
                      return {
                        field: item.field,
                        property: item.field,
                        order: item.order
                      };
                    });
                  }
                  if ($xeTable) {
                    filterList = $xeTable.getCheckedFilters();
                  }
                } else {
                  if ($xeTable) {
                    if (isReload) {
                      $xeTable.clearAll();
                    } else {
                      sortList = $xeTable.getSortColumns();
                      filterList = $xeTable.getCheckedFilters();
                    }
                  }
                }
                const commitParams = {
                  code,
                  button,
                  isInited,
                  isReload,
                  $grid: $xeGrid,
                  page: pageParams,
                  sort: sortList.length ? sortList[0] : {},
                  sorts: sortList,
                  filters: filterList,
                  form: formData,
                  options: ajaxMethods
                };
                reactData.sortData = sortList;
                reactData.filterData = filterList;
                reactData.tableLoading = true;
                return Promise.resolve((beforeQuery || ajaxMethods)(commitParams, ...args)).then(rest => {
                  reactData.tableLoading = false;
                  if (rest) {
                    if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
                      const totalProp = resConfigs.total;
                      const total = (_xeUtils.default.isFunction(totalProp) ? totalProp({
                        data: rest,
                        $grid: $xeGrid
                      }) : _xeUtils.default.get(rest, totalProp || 'page.total')) || 0;
                      tablePage.total = _xeUtils.default.toNumber(total);
                      const resultProp = resConfigs.result;
                      reactData.tableData = (_xeUtils.default.isFunction(resultProp) ? resultProp({
                        data: rest,
                        $grid: $xeGrid
                      }) : _xeUtils.default.get(rest, resultProp || 'result')) || [];
                      // 检验当前页码，不能超出当前最大页数
                      const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
                      if (tablePage.currentPage > pageCount) {
                        tablePage.currentPage = pageCount;
                      }
                    } else {
                      const listProp = resConfigs.list;
                      reactData.tableData = (listProp ? _xeUtils.default.isFunction(listProp) ? listProp({
                        data: rest,
                        $grid: $xeGrid
                      }) : _xeUtils.default.get(rest, listProp) : rest) || [];
                    }
                  } else {
                    reactData.tableData = [];
                  }
                  if (afterQuery) {
                    afterQuery(commitParams, ...args);
                  }
                  if (querySuccessMethods) {
                    querySuccessMethods(Object.assign(Object.assign({}, commitParams), {
                      response: rest
                    }));
                  }
                  return {
                    status: true
                  };
                }).catch(rest => {
                  reactData.tableLoading = false;
                  if (queryErrorMethods) {
                    queryErrorMethods(Object.assign(Object.assign({}, commitParams), {
                      response: rest
                    }));
                  }
                  return {
                    status: false
                  };
                });
              } else {
                (0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.query']);
              }
              break;
            }
          case 'delete':
            {
              const ajaxMethods = ajax.delete;
              const deleteSuccessMethods = ajax.deleteSuccess;
              const deleteErrorMethods = ajax.deleteError;
              if (ajaxMethods) {
                const selectRecords = gridExtendTableMethods.getCheckboxRecords();
                const removeRecords = selectRecords.filter(row => !$xeTable.isInsertByRow(row));
                const body = {
                  removeRecords
                };
                const commitParams = {
                  $grid: $xeGrid,
                  code,
                  button,
                  body,
                  form: formData,
                  options: ajaxMethods
                };
                if (selectRecords.length) {
                  return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
                    if (!removeRecords.length) {
                      return $xeTable.remove(selectRecords);
                    }
                    reactData.tableLoading = true;
                    return Promise.resolve((beforeDelete || ajaxMethods)(commitParams, ...args)).then(rest => {
                      reactData.tableLoading = false;
                      $xeTable.setPendingRow(removeRecords, false);
                      if (isRespMsg) {
                        if (_ui.VxeUI.modal) {
                          _ui.VxeUI.modal.message({
                            content: getRespMsg(rest, 'vxe.grid.delSuccess'),
                            status: 'success'
                          });
                        }
                      }
                      if (afterDelete) {
                        afterDelete(commitParams, ...args);
                      } else {
                        gridMethods.commitProxy('query');
                      }
                      if (deleteSuccessMethods) {
                        deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), {
                          response: rest
                        }));
                      }
                      return {
                        status: true
                      };
                    }).catch(rest => {
                      reactData.tableLoading = false;
                      if (isRespMsg) {
                        if (_ui.VxeUI.modal) {
                          _ui.VxeUI.modal.message({
                            id: code,
                            content: getRespMsg(rest, 'vxe.grid.operError'),
                            status: 'error'
                          });
                        }
                      }
                      if (deleteErrorMethods) {
                        deleteErrorMethods(Object.assign(Object.assign({}, commitParams), {
                          response: rest
                        }));
                      }
                      return {
                        status: false
                      };
                    });
                  });
                } else {
                  if (isActiveMsg) {
                    if (_ui.VxeUI.modal) {
                      _ui.VxeUI.modal.message({
                        id: code,
                        content: getI18n('vxe.grid.selectOneRecord'),
                        status: 'warning'
                      });
                    }
                  }
                }
              } else {
                (0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.delete']);
              }
              break;
            }
          case 'save':
            {
              const ajaxMethods = ajax.save;
              const saveSuccessMethods = ajax.saveSuccess;
              const saveErrorMethods = ajax.saveError;
              if (ajaxMethods) {
                const body = $xeTable.getRecordset();
                const {
                  insertRecords,
                  removeRecords,
                  updateRecords,
                  pendingRecords
                } = body;
                const commitParams = {
                  $grid: $xeGrid,
                  code,
                  button,
                  body,
                  form: formData,
                  options: ajaxMethods
                };
                // 排除掉新增且标记为删除的数据
                if (insertRecords.length) {
                  body.pendingRecords = pendingRecords.filter(row => $xeTable.findRowIndexOf(insertRecords, row) === -1);
                }
                // 排除已标记为删除的数据
                if (pendingRecords.length) {
                  body.insertRecords = insertRecords.filter(row => $xeTable.findRowIndexOf(pendingRecords, row) === -1);
                }
                let restPromise = Promise.resolve();
                if (editRules) {
                  // 只校验新增和修改的数据
                  restPromise = $xeTable[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
                }
                return restPromise.then(errMap => {
                  if (errMap) {
                    // 如果校验不通过
                    return;
                  }
                  if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
                    reactData.tableLoading = true;
                    return Promise.resolve((beforeSave || ajaxMethods)(commitParams, ...args)).then(rest => {
                      reactData.tableLoading = false;
                      $xeTable.clearPendingRow();
                      if (isRespMsg) {
                        if (_ui.VxeUI.modal) {
                          _ui.VxeUI.modal.message({
                            content: getRespMsg(rest, 'vxe.grid.saveSuccess'),
                            status: 'success'
                          });
                        }
                      }
                      if (afterSave) {
                        afterSave(commitParams, ...args);
                      } else {
                        gridMethods.commitProxy('query');
                      }
                      if (saveSuccessMethods) {
                        saveSuccessMethods(Object.assign(Object.assign({}, commitParams), {
                          response: rest
                        }));
                      }
                      return {
                        status: true
                      };
                    }).catch(rest => {
                      reactData.tableLoading = false;
                      if (isRespMsg) {
                        if (_ui.VxeUI.modal) {
                          _ui.VxeUI.modal.message({
                            id: code,
                            content: getRespMsg(rest, 'vxe.grid.operError'),
                            status: 'error'
                          });
                        }
                      }
                      if (saveErrorMethods) {
                        saveErrorMethods(Object.assign(Object.assign({}, commitParams), {
                          response: rest
                        }));
                      }
                      return {
                        status: false
                      };
                    });
                  } else {
                    if (isActiveMsg) {
                      if (_ui.VxeUI.modal) {
                        _ui.VxeUI.modal.message({
                          id: code,
                          content: getI18n('vxe.grid.dataUnchanged'),
                          status: 'info'
                        });
                      }
                    }
                  }
                });
              } else {
                (0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.save']);
              }
              break;
            }
          default:
            {
              const gCommandOpts = commands.get(code);
              if (gCommandOpts) {
                const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
                if (tCommandMethod) {
                  tCommandMethod({
                    code,
                    button,
                    $grid: $xeGrid,
                    $table: $xeTable
                  }, ...args);
                } else {
                  (0, _log.errLog)('vxe.error.notCommands', [code]);
                }
              }
            }
        }
        return (0, _vue.nextTick)();
      },
      zoom() {
        if (reactData.isZMax) {
          return gridMethods.revert();
        }
        return gridMethods.maximize();
      },
      isMaximized() {
        return reactData.isZMax;
      },
      maximize() {
        return handleZoom(true);
      },
      revert() {
        return handleZoom();
      },
      getFormData,
      getFormItems(itemIndex) {
        const formOpts = computeFormOpts.value;
        const {
          formConfig
        } = props;
        const {
          items
        } = formOpts;
        const itemList = [];
        _xeUtils.default.eachTree(formConfig && (0, _utils.isEnableConf)(formOpts) && items ? items : [], item => {
          itemList.push(item);
        }, {
          children: 'children'
        });
        return _xeUtils.default.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
      },
      getProxyInfo() {
        const $xeTable = refTable.value;
        if (props.proxyConfig) {
          const {
            sortData
          } = reactData;
          return {
            data: reactData.tableData,
            filter: reactData.filterData,
            form: getFormData(),
            sort: sortData.length ? sortData[0] : {},
            sorts: sortData,
            pager: reactData.tablePage,
            pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
          };
        }
        return null;
      }
      // setProxyInfo (options) {
      //   if (props.proxyConfig && options) {
      //     const { pager, form } = options
      //     const proxyOpts = computeProxyOpts.value
      //     if (pager) {
      //       if (pager.currentPage) {
      //         reactData.tablePage.currentPage = Number(pager.currentPage)
      //       }
      //       if (pager.pageSize) {
      //         reactData.tablePage.pageSize = Number(pager.pageSize)
      //       }
      //     }
      //     if (proxyOpts.form && form) {
      //       Object.assign(reactData.formData, form)
      //     }
      //   }
      //   return nextTick()
      // }
    };
    // 检查插槽
    if (process.env.NODE_ENV === 'development') {
      gridMethods.loadColumn = columns => {
        const $xeTable = refTable.value;
        _xeUtils.default.eachTree(columns, column => {
          if (column.slots) {
            _xeUtils.default.each(column.slots, func => {
              if (!_xeUtils.default.isFunction(func)) {
                if (!slots[func]) {
                  (0, _log.errLog)('vxe.error.notSlot', [func]);
                }
              }
            });
          }
        });
        if ($xeTable) {
          return $xeTable.loadColumn(columns);
        }
        return (0, _vue.nextTick)();
      };
      gridMethods.reloadColumn = columns => {
        gridExtendTableMethods.clearAll();
        return gridMethods.loadColumn(columns);
      };
    }
    const gridPrivateMethods = {
      extendTableMethods,
      callSlot(slotFunc, params) {
        if (slotFunc) {
          if (_xeUtils.default.isString(slotFunc)) {
            slotFunc = slots[slotFunc] || null;
          }
          if (_xeUtils.default.isFunction(slotFunc)) {
            return (0, _vn.getSlotVNs)(slotFunc(params));
          }
        }
        return [];
      },
      /**
       * 获取需要排除的高度
       */
      getExcludeHeight() {
        const {
          isZMax
        } = reactData;
        const el = refElem.value;
        const formWrapper = refFormWrapper.value;
        const toolbarWrapper = refToolbarWrapper.value;
        const topWrapper = refTopWrapper.value;
        const bottomWrapper = refBottomWrapper.value;
        const pagerWrapper = refPagerWrapper.value;
        const parentPaddingSize = isZMax ? 0 : (0, _dom.getPaddingTopBottomSize)(el.parentNode);
        return parentPaddingSize + (0, _dom.getPaddingTopBottomSize)(el) + (0, _dom.getOffsetHeight)(formWrapper) + (0, _dom.getOffsetHeight)(toolbarWrapper) + (0, _dom.getOffsetHeight)(topWrapper) + (0, _dom.getOffsetHeight)(bottomWrapper) + (0, _dom.getOffsetHeight)(pagerWrapper);
      },
      getParentHeight() {
        const el = refElem.value;
        if (el) {
          return (reactData.isZMax ? (0, _dom.getDomNode)().visibleHeight : _xeUtils.default.toNumber(getComputedStyle(el.parentNode).height)) - gridPrivateMethods.getExcludeHeight();
        }
        return 0;
      },
      triggerToolbarCommitEvent(params, evnt) {
        const {
          code
        } = params;
        return gridMethods.commitProxy(params, evnt).then(rest => {
          if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
            gridMethods.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), {
              isReload: code === 'reload'
            }), evnt);
          }
        });
      },
      triggerToolbarBtnEvent(button, evnt) {
        gridPrivateMethods.triggerToolbarCommitEvent(button, evnt);
        gridMethods.dispatchEvent('toolbar-button-click', {
          code: button.code,
          button
        }, evnt);
      },
      triggerToolbarTolEvent(tool, evnt) {
        gridPrivateMethods.triggerToolbarCommitEvent(tool, evnt);
        gridMethods.dispatchEvent('toolbar-tool-click', {
          code: tool.code,
          tool
        }, evnt);
      },
      triggerZoomEvent(evnt) {
        gridMethods.zoom();
        gridMethods.dispatchEvent('zoom', {
          type: reactData.isZMax ? 'max' : 'revert'
        }, evnt);
      }
    };
    Object.assign($xeGrid, gridExtendTableMethods, gridMethods, gridPrivateMethods);
    const columnFlag = (0, _vue.ref)(0);
    (0, _vue.watch)(() => props.columns ? props.columns.length : -1, () => {
      columnFlag.value++;
    });
    (0, _vue.watch)(() => props.columns, () => {
      columnFlag.value++;
    });
    (0, _vue.watch)(columnFlag, () => {
      (0, _vue.nextTick)(() => $xeGrid.loadColumn(props.columns || []));
    });
    (0, _vue.watch)(() => props.toolbarConfig, () => {
      initToolbar();
    });
    (0, _vue.watch)(computePageConfFlag, () => {
      initPages();
    });
    (0, _vue.watch)(() => props.proxyConfig, () => {
      initProxy();
    });
    hooks.forEach(options => {
      const {
        setupGrid
      } = options;
      if (setupGrid) {
        const hookRest = setupGrid($xeGrid);
        if (hookRest && _xeUtils.default.isObject(hookRest)) {
          Object.assign($xeGrid, hookRest);
        }
      }
    });
    initPages();
    (0, _vue.onMounted)(() => {
      (0, _vue.nextTick)(() => {
        const {
          columns
        } = props;
        if (props.formConfig) {
          if (!VxeUIFormComponent) {
            (0, _log.errLog)('vxe.error.reqComp', ['vxe-form']);
          }
        }
        if (props.pagerConfig) {
          if (!VxeUIPagerComponent) {
            (0, _log.errLog)('vxe.error.reqComp', ['vxe-pager']);
          }
        }
        // const { data, columns, proxyConfig } = props
        // const proxyOpts = computeProxyOpts.value
        // const formOpts = computeFormOpts.value
        // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
        //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
        // }
        // if (process.env.NODE_ENV === 'development') {
        //   if (proxyOpts.props) {
        //     warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
        //   }
        // }
        if (columns && columns.length) {
          $xeGrid.loadColumn(columns);
        }
        initToolbar();
        initProxy();
      });
      globalEvents.on($xeGrid, 'keydown', handleGlobalKeydownEvent);
    });
    (0, _vue.onUnmounted)(() => {
      globalEvents.off($xeGrid, 'keydown');
    });
    const renderVN = () => {
      const vSize = computeSize.value;
      const styles = computeStyles.value;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-grid', {
          [`size--${vSize}`]: vSize,
          'is--animat': !!props.animat,
          'is--round': props.round,
          'is--maximize': reactData.isZMax,
          'is--loading': props.loading || reactData.tableLoading
        }],
        style: styles
      }, renderLayout());
    };
    $xeGrid.renderVN = renderVN;
    (0, _vue.provide)('$xeGrid', $xeGrid);
    return $xeGrid;
  },
  render() {
    return this.renderVN();
  }
});